<template>
	<div>
		<el-button type="primary" plain size="mini" @click="handlerAdd">添加</el-button>
		<div>
			全局的 counter{{this.$store.state.count}}
		</div>

		<el-table size="mini" :data="tableData" style="width: 100%" max-height="750">
			<el-table-column prop="id" label="主键" width="180"> </el-table-column>
			<el-table-column prop="name" label="部门名称"> </el-table-column>
			<el-table-column prop="address" label="办公地址"> </el-table-column>
			<el-table-column prop="leader" label="部门领导"> </el-table-column>
			<el-table-column prop="active" label="数据状态"> </el-table-column>
			<el-table-column prop="createtime" label="创建时间"> </el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>



		<el-dialog title="部门编辑" :visible.sync="dialogVisible" width="500px">
			<edit @reload="queryData" :visible.sync="dialogVisible" v-if="dialogVisible" :id="id"></edit>
		</el-dialog>


	</div>
</template>

<script>
	// 引入axios
	import axios from 'axios'
	import edit from './edit'

	


	export default {
		name: 'ToDoList',
		//注册局部组件
		components: {
			edit
		},
		data() {
			return {
				dialogVisible: false,
				id: undefined,
				tableData: []
			}
		},
		methods: {
			handleEdit(index, row) {
				this.dialogVisible = true; //打开编辑框
				this.id = row.id
			},
			handleDelete(index, row) {

				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				 type: 'warning'
				}).then(() => {


					this.$http.get('/api/axios_dept', (success) => {
						//重新查询结果
						this.queryData()
						//提示
						this.$message({
							type: 'success',
							message: '删除成功!'
						});

					}, {
						_type: 'delete',
						id: row.id
					})


				});

			},
			handlerAdd() {
				this.id = null;
				this.dialogVisible = true
			},
			queryData() {
				// const loading = this.$loading({
				//   lock: true,
				//   text: 'Loading',
				//   spinner: 'el-icon-loading',
				//   background: 'rgba(0, 0, 0, 0.7)'
				// });
				
				
				this.$http.get('/api/axios_dept?_type=list', (data) => {
					this.tableData = data
						// loading.close();
						console.log("业务处理.....")
				}, {
					_type: "list"
				})


			}
		},
		computed: {

		},
		watch:{
			'$store.state.count': function(){
			  // console.log("计数器发生变化:"+this.$store.state.count)
			  //可以根据store中的状态变化执行 具体的业务代码
			  console.log("计数器发生变化:"+this.$store.state.count);
			  console.log("根据实验室重新查询")
			}
		},
		//在组件呗创建的时候加载数据 初始化
		created() {
			console.log("准备查询数据....")
			this.queryData()
		}
	}
</script>

<style>


</style>
